<template>
    <!-- 面试跟进页面 -->
    <div class="interview-follow-up-container">
        <!-- 操作栏 -->
        <div class="toolbar">
            <div class="toolbar-left">
                <el-button type="primary" plain @click="add">
                    <el-icon><Plus /></el-icon>
                    发起面试
                </el-button>
            </div>

            <div class="toolbar-right">
                <el-input 
                    class="search-input" 
                    v-model="searchKeyword" 
                    placeholder="搜索数据" 
                    @keyup.enter="handleSearch"
                    clearable
                >
                    <template #prefix>
                        <el-icon><Search /></el-icon>
                    </template>
                </el-input>

                <el-dropdown @command="handleFilterCommand">
                    <el-button>
                        筛选<el-icon class="el-icon--right"><arrow-down /></el-icon>
                    </el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item 
                                v-for="item in FilterData" 
                                :key="item.value"
                                :command="item.value"
                                :class="{ active: Screening === item.value }"
                            >
                                {{ item.label }}
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>

                <el-button @click="sorting">
                    {{ serialNumber === 1 ? '升序' : '降序' }}
                    <el-icon><Sort /></el-icon>
                </el-button>

                <el-button @click="refresh">
                    <el-icon><Refresh /></el-icon>
                    刷新
                </el-button>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="content-wrapper">
            <!-- 数据表格 -->
            <div class="table-container">
                <!-- 待面试的表格 -->
                <el-table 
                    :data="page.records" 
                    class="interview-table"
                    v-if="Screening === '待面试'"
                    @row-click="handleRowClick"
                    v-loading="loadingTable"
                >
                    <el-table-column fixed="left" prop="candidateid" label="需求编号" width="150" align="center">
                        <template #default="scope">
                            <span class="link-text">{{ scope.row.candidateid }}</span>
                        </template>
                    </el-table-column>
                    
                    <el-table-column fixed="left" prop="recruitmentrequirement.requirementid" label="简历编号" width="150" align="center" />
                    
                    <el-table-column fixed="left" prop="candidatename" label="姓名" width="150" align="center" />

                    <el-table-column prop="gender" label="性别" width="120" align="center">
                        <template #default="scope">
                            <el-tag :type="scope.row.gender === 1 ? 'danger' : 'primary'">
                                {{ scope.row.gender === 1 ? '女' : '男' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    
                    <el-table-column prop="cellPhone" label="手机号" width="200" align="center" />
                    
                    <el-table-column prop="screenpeople" label="招聘负责人" width="200" align="center" />
                    
                    <el-table-column prop="resumeStatus" label="简历状态" width="200" align="center">
                        <template #default="scope">
                            <el-tag v-if="scope.row.resumeStatus === '待面试'" type="warning">
                                {{ scope.row.resumeStatus }}
                            </el-tag>
                            <el-tag v-else type="primary">
                                {{ scope.row.resumeStatus }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    
                    <!-- <el-table-column prop="screenpeople" label="提交人" width="200" align="center">
                        <template #default="scope">
                            <span class="link-text">{{ scope.row.screenpeople }}</span>
                        </template>
                    </el-table-column> -->
                    
                    <el-table-column prop="filterDate" label="提交时间" width="200" align="center" />
                </el-table>

                <!-- 进行中的表格 -->
                <el-table 
                    :data="performPagination.records" 
                    class="interview-table"
                    v-else
                    @row-click="interviewDoubleClick"
                    v-loading="loadingTable"
                >
                    <el-table-column fixed="left" prop="candidateid" label="需求编号" width="150" align="center">
                        <template #default="scope">
                            <span class="link-text">{{ scope.row.recruitmentrequirement.requirementid }}</span>
                        </template>
                    </el-table-column>
                    
                    <el-table-column fixed="left" prop="candidateresume.candidateid" label="简历编号" width="150" align="center" />
                    
                    <el-table-column fixed="left" prop="candidateresume.candidatename" label="姓名" width="150" align="center" />

                    <el-table-column prop="gender" label="性别" width="120" align="center">
                        <template #default="scope">
                            <el-tag :type="scope.row?.candidateresume?.gender === 1 ? 'danger' : 'primary'">
                                {{ scope.row?.candidateresume?.gender === 1 ? '女' : '男' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    
                    <el-table-column prop="interviewNumber" label="面试编号" width="200" align="center" />
                    
                    <el-table-column prop="candidateresume.screenpeople" label="招聘负责人" width="200" align="center" />
                    
                    <el-table-column prop="candidateresume.resumeStatus" label="简历状态" width="200" align="center">
                        <template #default="scope">
                            <el-tag v-if="scope.row?.candidateresume?.resumeStatus === '已结束'" type="danger">
                                {{ scope.row?.candidateresume?.resumeStatus }}
                            </el-tag>
                            <el-tag v-else type="primary">
                                {{ scope.row?.candidateresume?.resumeStatus }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    
                    <el-table-column prop="candidateresume.screenpeople" label="提交人" width="200" align="center">
                        <template #default="scope">
                            <span class="link-text">{{ scope.row.screenpeople }}</span>
                        </template>
                    </el-table-column>
                    
                    <el-table-column prop="interviewRound" label="面试次数" width="200" align="center" />
                    
                    <el-table-column prop="candidateresume.filterDate" label="提交时间" width="200" align="center" />
                    
                    <el-table-column prop="theplanbegins" label="面试开始时间" width="200" align="center" />
                    
                    <el-table-column prop="theProgramEnded" label="面试结束时间" width="200" align="center" />
                </el-table>
            </div>
        </div>

        <!-- 分页 -->
        <div class="pagination-container">
            <el-pagination
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                v-model:current-page="page.current"
                v-model:page-size="page.size"
                :page-sizes="[10, 20, 30, 40]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
                background
            >
            </el-pagination>
        </div>
    </div>

    <!-- 面试详情页面 -->
    <el-dialog 
        :title="`面试详情 - ${interviewNumberId}`" 
        v-model="detailsOfTheInterviewInformation" 
        fullscreen 
        destroy-on-close
    >
        <Details :data="interviewNumberId"></Details>
    </el-dialog>

    <!-- 详情页面 -->
    <el-dialog 
        :title="`简历详情 - ${clickOnTheData}`" 
        v-model="isVisible" 
        fullscreen 
        destroy-on-close
    >
        <resumeDetails :data="clickOnTheData"></resumeDetails>
    </el-dialog>
    
    <!--添加  -->
    <el-dialog title="发起面试" v-model="AddDisplay" fullscreen destroy-on-close>
        <Insert @ref="Initiate"></Insert>
    </el-dialog>
</template>

<script lang="ts" setup>
import request from '@/api/request';
import { ref, onMounted } from 'vue';
import Details from '@/views/recruitment/InterviewFollowUp/Details.vue'
import Insert from '@/views/recruitment/InterviewFollowUp/insert.vue'
import resumeDetails from '@/views/recruitment/InterviewFollowUp/resumeDetails.vue'
import { Plus, Search, ArrowDown, Sort, Refresh } from '@element-plus/icons-vue'

// 响应式数据
const isVisible = ref(false) // 详情显示
const detailsOfTheInterviewInformation = ref(false) // 面试详情显示
const AddDisplay = ref(false) // 添加显示
const loadingTable = ref(false) // 表格加载状态
const searchKeyword = ref('') // 搜索关键字
const serialNumber = ref(1) // 排序状态
const Screening = ref('待面试') // 筛选状态

// 分页数据
const page = ref({
    current: 1,
    size: 10,
    total: 0,
    records: []
})

const performPagination = ref({
    current: 1,
    size: 10,
    total: 0,
    records: []
})

// 筛选数据
const FilterData = ref([
    { value: '待面试', label: '待面试' },
    { value: '进行中', label: '进行中' },
])

// 刷新处理
const refresh = () => {
    Screening.value = '待面试'
    searchKeyword.value = ''
    page.value.current = 1
    interviewInformation()
}

// 获取面试信息数据
const interviewInformation = () => {
    loadingTable.value = true
    // 根据不同状态调用不同的API
    let url = '/interviewschedule/queryStatusPending';
    if (Screening.value === '进行中') {
        url = '/interviewschedule/queryStatusPendingqueryStatusPending';
    }
    request({
        url: url,
        method: 'get',
        params: {
            current: page.value.current,
            size: page.value.size,
            status: Screening.value,
            candidatename: searchKeyword.value,
            intendedPosition: searchKeyword.value
        }
    }).then(res => {
        if (Screening.value === '进行中') {
            performPagination.value = res.data
        } else {
            page.value = res.data
        }
        loadingTable.value = false
        console.log("面试信息数据", Screening.value === '进行中' ? performPagination.value : page.value);
    }).catch(() => {
        loadingTable.value = false
    })
}

// 搜索处理
const handleSearch = () => {
    page.value.current = 1
    interviewInformation()
}

// 筛选命令处理
const handleFilterCommand = (command) => {
    Screening.value = command
    page.value.current = 1
    interviewInformation()
}

// 排序处理
const sorting = () => {
    serialNumber.value = serialNumber.value === 1 ? 2 : 1;
    const url = serialNumber.value === 1 ? '/interviewschedule/ascendingOrder' : '/interviewschedule/descendingOrder'
    loadingTable.value = true
    request({
        url,
        method: 'get',
        params: {
            current: page.value.current,
            size: page.value.size,
            status: Screening.value,
            candidatename: searchKeyword.value,
            intendedPosition: searchKeyword.value
        }
    }).then(res => {
        page.value = res.data
        loadingTable.value = false
    }).catch(() => {
        loadingTable.value = false
    })
}

// 分页处理
const handleCurrentChange = (val) => {
    page.value.current = val
    interviewInformation()
}

const handleSizeChange = (val) => {
    page.value.size = val
    page.value.current = 1
    interviewInformation()
}

// 面试双击处理
const interviewNumberId = ref() // 面试编号
const interviewDoubleClick = (row) => {
    console.log("双击获取的面试数据", row);
    interviewNumberId.value = row.interviewNumber
    console.log("面试编号", interviewNumberId.value);
    detailsOfTheInterviewInformation.value = true
}

// 获取当前数据
const clickOnTheData = ref()
const handleRowClick = (row) => {
    console.log(row)
    clickOnTheData.value = row.candidateid
    console.log('当前获取的数据', clickOnTheData.value);
    isVisible.value = true
}

// 添加处理
const Initiate = () => {
    AddDisplay.value = false
    page.value.current = 1
    interviewInformation()
}

const add = () => {
    AddDisplay.value = true
}

// 初始化数据
onMounted(() => {
    interviewInformation()
})
</script>

<style scoped>
.interview-follow-up-container {
    padding: 20px;
    background-color: #f5f7fa;
    min-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
}

.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.toolbar-left {
    flex: 1;
}

.toolbar-right {
    display: flex;
    gap: 10px;
    align-items: center;
}

.search-input {
    width: 250px;
}

.content-wrapper {
    flex: 1;
    overflow: auto;
    margin-bottom: 20px;
}

.table-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.interview-table {
    width: 100%;
}

.pagination-container {
    display: flex;
    justify-content: flex-end;
    background-color: #fff;
    padding: 15px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.link-text {
    color: #409eff;
    cursor: pointer;
}

.link-text:hover {
    color: #66b1ff;
}

.active {
    color: #409eff;
    font-weight: bold;
}
</style>